<template>
    <div class="map-view">
        <!-- 工作地图 -->
        <div id="main"></div>
    </div>
  </template>
<script setup>
import geoJson from '@/assets/data.json'//注册可用的地图，必须包括geo组件或者map图表类型的时候才可用
    import { onMounted} from "vue";
    import echarts from "echarts";
    onMounted(()=>{
        let myChart=echarts.init(document.getElementById('main'))
        echarts.registerMap('china',geoJson)//注册可用的地图，必须包括geo组件或者map图表类型的时候才可用
        let option={
            backgroundColor:'rgb(121,145,209)',//背景色，默认无背景。
            geo:{//地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
                map:'china',
                aspectScale:0.75,//地图缩放
                zoom:1.1,//视图缩放比
                itemStyle:{//地图区域的多边形 图形样式。
                    normal:{
                        areaColor:{//地图区域的颜色。
                            type:'radial', //径向渐变
                            x:0.5,
                            y:0.5,
                            r:0.8,
                        },
                        shadowColor: 'rgb(58, 115, 192)',//阴影颜色
                        shadowOffsetX: 10,//阴影水平方向上的偏移距离。
                        shadowOffsetY: 11//阴影垂直方向上的偏移距离。
                    },
                    regions:[{
                        name:'南海诸岛'
                    }]
                },
                regions: [{
                        name: '南海诸岛',
                        itemStyle: {
                            opacity: 0//透明度
                        }
                    }] 
            },
            series:[
                {//配置地图相关参数，绘制地图，这个对象是关于地图图表的相关配置
                    type:'map',
                    label: {//地图上的文字
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#1DE9B6'
                                }
                            },
                            emphasis: {//高亮状态下的多边形和标签样式。
                                textStyle: {
                                    color: 'rgb(183, 185, 14)'
                                }
                            }
                        },
                    zoom:1.1,//视图缩放比
                    map:'china',
                    itemStyle:{
                        normal:{
                            backgroundColor:'rgb(147,235,248)',
                            borderWidth:1,
                            areaColor:{
                                type:'radial', //径向渐变
                                x:0.5,
                                y:0.5,
                                r:0.8,
                                colorStops:[
                                {
                                    offset:0,
                                    color:'rgb(31,54,150)'  //0%处的颜色
                                },
                                {
                                    offset:1, 
                                    color:'rgb(89,128,142)'    //100%处的颜色
                                },
                                ],
                                globalCoord:true
                            }
                            },
                            emphasis:{////高亮状态下的多边形和标签样式。
                                areaColor:'rgb(46,229,206)',//区域显示颜色
                                borderWidth:0.1//边框宽度
                            }
                    },
                },
                {//关于地图中散点图的配置
                    type:'effectScatter',//散点
                    coordinateSystem:'geo',//该系列使用的坐标系   'geo'  使用地理坐标系
                    showEffectOn:'render',//配置何时显示特效。  'render'绘制完成后显示
                    SymbolSize:10,//散点大小
                    zlevel:1,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                    // data:points,
                    data:[
                    {
                        "value": [//坐标点  
                            118.8062,
                            31.9208
                        ],
                        "itemStyle": {
                            "color": "#4ab2e5"  //坐标点颜色
                        }
                    },
                    {
                        "value": [
                            127.9688,
                            45.368
                        ],
                        "itemStyle": {
                            "color": "#4fb6d2"
                        }
                    },
                    {
                        "value": [
                            110.3467,
                            41.4899
                        ],
                        "itemStyle": {
                            "color": "#52b9c7"
                        }
                    },
                    {
                        "value": [
                            125.8154,
                            44.2584
                        ],
                        "itemStyle": {
                            "color": "#5abead"
                        }
                    },
                    {
                        "value": [
                            116.4551,
                            40.2539
                        ],
                        "itemStyle": {
                            "color": "#f34e2b"
                        }
                    },
                    {
                        "value": [
                            123.1238,
                            42.1216
                        ],
                        "itemStyle": {
                            "color": "#f56321"
                        }
                    },
                    {
                        "value": [
                            114.4995,
                            38.1006
                        ],
                        "itemStyle": {
                            "color": "#f56f1c"
                        }
                    },
                    {
                        "value": [
                            117.4219,
                            39.4189
                        ],
                        "itemStyle": {
                            "color": "#f58414"
                        }
                    },
                    {
                        "value": [
                            112.3352,
                            37.9413
                        ],
                        "itemStyle": {
                            "color": "#f58f0e"
                        }
                    },
                    {
                        "value": [
                            109.1162,
                            34.2004
                        ],
                        "itemStyle": {
                            "color": "#f5a305"
                        }
                    },
                    {
                        "value": [
                            103.5901,
                            36.3043
                        ],
                        "itemStyle": {
                            "color": "#e7ab0b"
                        }
                    },
                    {
                        "value": [
                            106.3586,
                            38.1775
                        ],
                        "itemStyle": {
                            "color": "#dfae10"
                        }
                    },
                    {
                        "value": [
                            101.4038,
                            36.8207
                        ],
                        "itemStyle": {
                            "color": "#d5b314"
                        }
                    },
                    {
                        "value": [
                            103.9526,
                            30.7617
                        ],
                        "itemStyle": {
                            "color": "#c1bb1f"
                        }
                    },
                    {
                        "value": [
                            108.384366,
                            30.439702
                        ],
                        "itemStyle": {
                            "color": "#b9be23"
                        }
                    },
                    {
                        "value": [
                            113.0823,
                            28.2568
                        ],
                        "itemStyle": {
                            "color": "#a6c62c"
                        }
                    },
                    {
                        "value": [
                            102.9199,
                            25.46639
                        ],
                        "itemStyle": {
                            "color": "#96cc34"
                        }
                    },
                    {
                        "value": [
                            119.4543,
                            25.9222
                        ]
                    }
                        ],//数据---一个点的坐标及颜色
                    rippleEffect:{
                        period:15,//动画的周期，秒数。
                        scale:4,//动画中波纹的最大缩放比例。
                        brushType:'fill'//波纹的绘制方式，可选 'stroke' 和 'fill'。
                    }
                },
                {//关于地图中线路动画效果设置
                    type:'lines',
                    zlevel:2,//zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。
                    effect:{
                        show:true,
                        period:4,//动画周期
                        symbol:'arrow',//箭头
                        SymbolSize:7,//大小
                        trailLength:0.4//拖尾
                    },
                    lineStyle:{
                        normal:{
                            color:"#1DE9B6",
                            width:1,//线的宽度
                            opacity:0.1,//透明度
                            curveness:0.3//弯曲程度
                        }
                    },
                    // data:linesData,
                    data:[
                        {
                            "coords": [//一个包含两个到多个二维坐标的数组
                                
                                [
                                    117.4219,//天津的坐标
                                    39.4189
                                ],
                                [
                                    118.8062,
                                    31.9208
                                ]
                            ],
                            "lineStyle": {
                                "color": "#4ab2e5"////线的颜色
                            }
                        },
                        {
                            "coords": [
                                [
                                    117.4219,//天津的坐标
                                    39.4189
                                ],
                                [
                                    127.9688,
                                    45.368
                                ]
                            ],
                            "lineStyle": {
                                "color": "#4fb6d2"//线的颜色
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    110.3467,
                                    41.4899
                                ]
                            ],
                            "lineStyle": {
                                "color": "#52b9c7"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    125.8154,
                                    44.2584
                                ]
                            ],
                            "lineStyle": {
                                "color": "#5abead"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    116.4551,
                                    40.2539
                                ]
                            ],
                            "lineStyle": {
                                "color": "#f34e2b"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                        39.4189
                                ],
                                [
                                    123.1238,
                                    42.1216
                                ]
                            ],
                            "lineStyle": {
                                "color": "#f56321"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    114.4995,
                                    38.1006
                                ]
                            ],
                            "lineStyle": {
                                "color": "#f56f1c"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    117.4219,
                                    39.4189
                                ]
                            ],
                            "lineStyle": {
                                "color": "#f58414"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    112.3352,
                                    37.9413
                                ]
                            ],
                            "lineStyle": {
                                "color": "#f58f0e"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    109.1162,
                                    34.2004
                                ]
                            ],
                            "lineStyle": {
                                "color": "#f5a305"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    103.5901,
                                    36.3043
                                ]
                            ],
                            "lineStyle": {
                                "color": "#e7ab0b"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    106.3586,
                                    38.1775
                                ]
                            ],
                            "lineStyle": {
                                "color": "#dfae10"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    101.4038,
                                    36.8207
                                ],
                            ],
                            "lineStyle": {
                                "color": "#d5b314"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    103.9526,
                                    30.7617
                                ]
                            ],
                            "lineStyle": {
                                "color": "#c1bb1f"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    108.384366,
                                    30.439702
                                ]
                            ],
                            "lineStyle": {
                                "color": "#b9be23"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    113.0823,
                                    28.2568
                                ]
                            ],
                            "lineStyle": {
                                "color": "#a6c62c"
                            }
                        },
                        {
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    102.9199,
                                    25.46639
                                ]
                            ],
                            "lineStyle": {
                                "color": "#96cc34"
                            }
                        },
                        {                           
                            "coords": [
                                
                                [
                                    117.4219,
                                    39.4189
                                ],
                                [
                                    119.4543,
                                    25.9222
                                ]
                            ]
                        }
                    ]//数据--线路需要的左边及颜色
                }
            ]
        }
        myChart.setOption(option)
    })
    
</script>


  <style lang="less" scoped>
  .map-view{
    width:100%;
    #main{
      width:100%;
      height:450px;
    }
  }
  </style>